{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>跨境电商综合服务平台 － WanFeng</title>
    <meta name="description" content="Responsive, Bootstrap, BS4">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
    <link rel="apple-touch-icon" href="{% static '' %}aside/images/logo.png">
    <meta name="apple-mobile-web-app-title" content="Flatkit">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="shortcut icon" sizes="196x196" href="{% static '' %}aside/images/logo.png">
    <link rel="stylesheet" href="{% static '' %}aside/css/animate.css/animate.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/glyphicons/glyphicons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/font-awesome/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/material-design-icons/material-design-icons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/ionicons/css/ionicons.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/simple-line-icons/css/simple-line-icons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/bootstrap/dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/styles/app.min.css">
    <link rel="stylesheet" href="{% static '' %}aside/css/styles/font.css" type="text/css">
</head>
<body>
<div class="app" id="app">
<div class="p-a black">
    <div class="navbar" data-pjax><a data-toggle="collapse" data-target="#navbar" class="navbar-item pull-right hidden-md-up m-a-0 m-l"><i class="ion-android-menu"></i></a> <a href="/" class="navbar-brand">
        <div data-ui-include="'{% static '' %}aside/images/logo.svg'"></div>
        <img src="{% static '' %}aside/images/logo.png" alt="." class="hide"> <span class="hidden-folded inline">WanFeng</span></a>
        <div class="collapse navbar-toggleable-sm pull-right pull-none-xs" id="navbar">
            <ul class="nav navbar-nav text-info-hover" data-ui-nav>
                <li class="nav-item"><a href="#features" data-ui-scroll-to class="nav-link"><span class="nav-text">特色功能</span></a></li>
                <li class="nav-item"><a href="#demos" data-ui-scroll-to class="nav-link"><span class="nav-text">系统演示</span></a></li>
                <li class="nav-item"><a href="#" class="nav-link"><span class="nav-text text-info">注册</span></a></li>
                <li class="nav-item"><a href="{% url 'erp:order' %}" class="nav-link"><span class="btn btn-md rounded info">登陆</span></a></li>
            </ul>
        </div>
    </div>
</div>
<div id="content" class="app-content" role="main">
<div class="app-body">
<div class="row-col black">
    <div class="col-sm-3"></div>
    <div class="col-sm-6 text-center">
        <div class="p-t-lg">
            <h1 class="m-y-md text-white">数据在手，电商不愁 <br>助力中小卖家 轻松玩转跨境！</h1>
            <h6 class="text-muted m-b-lg">WanFeng v4.0 @2016</h6>
            <a href="{% url 'erp:cpanel' %}" class="btn btn-lg rounded danger p-x-md m-x">ERP系统</a> <a href="{% url 'dashboard' %}" class="btn btn-lg rounded success p-x-md m-x">数据采集</a> <a href="{% url 'buy' %}" class="btn btn-lg rounded p-x-md m-x">立即购买 $99/年</a></div>
    </div>
    <div class="col-sm-3"></div>
</div>
<div class="black">
    <div>
        <canvas data-ui-jp="chart" data-ui-options="
    {
      type: 'line',
      data: {
          labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
          datasets: [
              {
                  label: 'Dataset',
                  data: [35, 30, 28, 32, 25, 22, 19, 30, 35, 41, 35, 40, 42, 45, 43, 50, 52, 55, 65, 60, 62, 60, 70, 77, 85, 100],
                  fill: true,
                  lineTension: 0.3,
                  backgroundColor: '#2196f3',
                  borderColor: '#41abff',
                  borderWidth: 3,
                  pointBorderColor: '#2196f3',
                  pointBackgroundColor: '#fff',
                  pointBorderWidth: 2,
                  pointHoverRadius: 4,
                  pointHoverBackgroundColor: '#fff',
                  pointHoverBorderColor: '#fff',
                  pointHoverBorderWidth: 2,
                  pointRadius: 0,
                  pointHitRadius: 10,
                  spanGaps: false,
                  barPercentage: 1
              }
          ]
      },
      options: {
      		maintainAspectRatio: false,
	      	scales:{
		      	xAxes: [{
		           display: false,
		           barPercentage: 0.5
		        }],
		        yAxes: [{
		           display: false
		        }]
	       	},
	       	legend:{
	       		display: false
	   		},
	   		tooltips:{
	   			enabled: false
	   		}
      }
    }
    " height="280"></canvas>
    </div>
</div>
<div class="row-col info h-v p-t-lg">
    <div class="col-sm-1"></div>
    <div class="col-sm-5">
        <div class="p-a-lg">
            <h3 class="m-y-lg">一站式管理后台</h3>
            <p class="text-muted m-b-lg text-md">集成产品开发、产品采购、库存管理、订单管理、消息处理、物流管理、财务管理. 轻松开启您的跨境电商之旅.</p>
            <a href="{% url 'buy' %}" class="btn rounded btn-outline b-white b-2x m-b-lg p-x-md">立即购买</a></div>
    </div>
    <div class="col-sm-6" style="min-height: 320px; background-image:url({% static '' %}aside/images/dashboard.png); background-size: cover"></div>
</div>
<div class="p-y-lg b-b box-shadow-z0 dark-white" id="features">
    <div class="container p-y-md">
        <h4 class="text-center m-b-lg">系统功能</h4>
        <div class="row">
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-ios-monitor-outline text-3x"></i></span>
                <h6 class="_600 m-y">热销产品推荐</h6>
                <p class="text-muted">强大的数据抓取与分析系统，热销产品推荐，一键采集数据包，及时掌握市场动态，占领先机！</p>
            </div>
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-ios-paper-outline text-3x"></i></span>
                <h6 class="_600 m-y">产品一键刊登</h6>
                <p class="text-muted">多平台产品一键刊登，精选优质供应商，物美价优 it's real application layout.</p>
            </div>
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-ios-pie-outline text-3x"></i></span>
                <h6 class="_600 m-y">数据可视化</h6>
                <p class="text-muted">丰富的数据图表展示，洞悉数据背后的逻辑与趋势，驱动持续运营. Visualize your data in different ways with animated and customisable. Great rendering performance across all modern browsers.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-social-html5-outline text-3x"></i></span>
                <h6 class="_600 m-y">Bootstrap 4 framework</h6>
                <p class="text-muted">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
            </div>
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-social-html5-outline text-3x"></i></span>
                <h6 class="_600 m-y">Ajax Powered</h6>
                <p class="text-muted">Using Html5 pushState without reloading your page's layout or any resources (JS, CSS), giving the appearance of a fast, full page load.</p>
            </div>
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-social-javascript-outline text-3x"></i></span>
                <h6 class="_600 m-y">Lazy load modules</h6>
                <p class="text-muted">Load modules &amp; components on demand (lazy load) with jQuery.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-social-sass text-3x"></i></span>
                <h6 class="_600 m-y">SASS Css</h6>
                <p class="text-muted">its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
            </div>
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-social-nodejs text-3x"></i></span>
                <h6 class="_600 m-y">Bower &amp; Grunt</h6>
                <p class="text-muted">Automate development tasks, like compiling less to css, concatenating and minifying js files; Bower manages frameworks, libraries, assets, and utilities for you.</p>
            </div>
            <div class="col-sm-4 m-y-md"><span class="text-muted"><i class="ion-social-chrome-outline text-3x"></i></span>
                <h6 class="_600 m-y">Cross Browser</h6>
                <p class="text-muted">Supports a wide variety of modern browsers and devices, built to work best in the latest desktop and mobile browsers</p>
            </div>
        </div>
    </div>
</div>
<div class="dark-light" id="demos">
    <div class="container">
        <div class="p-a-lg text-center">
            <h2 class="m-b-lg">What you get with aside template</h2>
            <p><a href="dashboard.html?bg=&folded=true" class="btn info">Light Theme</a> <a href="dashboard.html?bg=black&folded=true" class="btn black">Dark Theme</a> <a href="rtl.dashboard.html?bg=&folded=true" class="btn success">RTL</a></p>
        </div>
    </div>
    <div class="no-scroll h-v" style="max-height: 500px">
        <div class="p-a" style="transform: translate(50%, 0%) scale(.9) rotateX(60deg) rotateY(0deg) rotate(45deg);transform-origin: top">
            <div class="row">
                <div class="col-xs-4">
                    <div>
                        <div class="item-media item-media-4by3 margin"></div>
                        <div class="item-media item-media-4by3 margin"></div>
                        <a href="dashboard.html?bg=black" class="item-media item-media-4by3 margin box-shadow-z3" style="background-image: url({% static '' %}aside/images/dark.png);background-size: cover"></a>
                        <div class="item-media item-media-4by3 margin box-shadow-z3">
                            <div class="item-media-content p-a-lg info">
                                <div class="hidden-sm-down">
                                    <h4>Dark Theme</h4>
                                    <p class="text-muted">Config any color on any blocks. with Grey, Dark, Black Themes</p>
                                </div>
                            </div>
                        </div>
                        <a href="app.contact.html" class="item-media item-media-4by3 margin box-shadow-z3" style="background-image: url({% static '' %}aside/images/contact.png);background-size: cover"></a>
                        <div class="item-media item-media-4by3 margin box-shadow-z3">
                            <div class="item-media-content p-a-lg success">
                                <div class="hidden-sm-down">
                                    <h4>Contacts App</h4>
                                    <p class="text-muted">Config any color on any blocks. with Grey, Dark, Black Themes</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div>
                        <div class="item-media item-media-4by3 margin"></div>
                        <a href="chartjs.html" class="item-media item-media-4by3 margin box-shadow-z3" style="background-image: url({% static '' %}aside/images/chart.png);background-size: cover"></a>
                        <div class="item-media item-media-4by3 margin box-shadow-z3">
                            <div class="item-media-content p-a-lg accent">
                                <div class="hidden-sm-down">
                                    <h4>Beautiful Chart</h4>
                                    <p class="text-muted">Config any color on any blocks. with Grey, Dark, Black Themes</p>
                                </div>
                            </div>
                        </div>
                        <a href="dashboard.html?bg=" class="item-media item-media-4by3 margin box-shadow-z3" style="background-image: url({% static '' %}aside/images/dashboard.png);background-size: cover"></a>
                        <div class="item-media item-media-4by3 margin box-shadow-z3">
                            <div class="item-media-content p-a-lg warn">
                                <div class="hidden-sm-down">
                                    <h4>Light Theme</h4>
                                    <p class="text-muted">Config any color on any blocks. with Grey, Dark, Black Themes</p>
                                </div>
                            </div>
                        </div>
                        <a href="app.message.html" class="item-media item-media-4by3 margin box-shadow-z3" style="background-image: url({% static '' %}aside/images/message.png);background-size: cover"></a></div>
                </div>
                <div class="col-xs-4">
                    <div>
                        <div class="item-media item-media-4by3 margin box-shadow-z3">
                            <div class="item-media-content p-a-lg indigo">
                                <div class="hidden-sm-down">
                                    <h4>Project Management</h4>
                                    <p class="text-muted">Config any color on any blocks. with Grey, Dark, Black Themes</p>
                                </div>
                            </div>
                        </div>
                        <a href="app.project.html" class="item-media item-media-4by3 margin box-shadow-z3" style="background-image: url({% static '' %}aside/images/project.png);background-size: cover"></a> <a href="map.vector.html" class="item-media item-media-4by3 margin box-shadow-z3" style="background-image: url({% static '' %}aside/images/map.png);background-size: cover"></a>
                        <div class="item-media item-media-4by3 margin box-shadow-z3">
                            <div class="item-media-content p-a-lg danger">
                                <div class="hidden-sm-down">
                                    <h4>World Market</h4>
                                    <p class="text-muted">Config any color on any blocks. with Grey, Dark, Black Themes</p>
                                </div>
                            </div>
                        </div>
                        <a href="app.inbox.html" class="item-media item-media-4by3 margin box-shadow-z3" style="background-image: url({% static '' %}aside/images/inbox.png);background-size: cover"></a>
                        <div class="item-media item-media-4by3 margin box-shadow-z3">
                            <div class="item-media-content p-a-lg dark-white">
                                <div class="hidden-sm-down">
                                    <h4>Message App</h4>
                                    <p class="text-muted">Config any color on any blocks. with Grey, Dark, Black Themes</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<div class="footer black text-info-hover">
    <div class="container">
        <div class="p-y-lg b-b"><a href="{% url 'buy' %}" class="btn info rounded pull-right pull-none-xs">立即购买</a>
            <div class="m-r">
                <div class="text-md p-y-sm">已累积服务超过<code class="">1,000+</code>跨境电商卖家，每天处理的订单量高达<code class="">3,000＋</code>单。日均推荐优质产品<code class="">200＋</code>款！</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row p-y-lg">
            <div class="col-md-5">
                <h6 class="text-sm text-u-c m-b text-muted">我们是：</h6>
                <p>领先的跨境电商综合服务平台<br>
                    让商业更智能，外贸更简单！</p>
                <p class="m-t-md text-muted p-r-lg"><small class="text-muted">以大数据选品、供应链SAAS协同等核心技术支持分销交易和海外销售，以全开放的平台设计实现供应商与分销商的要素资源最优配置</small></p>
                <div class="text-muted m-y-lg">
                    <h2 class="text-muted _600"><span class="text-muted">WanFeng</span></h2>
                </div>
            </div>
            <div class="col-sm-2 col-xs-6">
                <h6 class="text-sm text-u-c m-b text-muted">公司</h6>
                <div class="m-b-md">
                    <ul class="nav l-h-2x">
                        <li class="nav-item"><a class="nav-link" href="#">关于我们</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">招商合作</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">隐私政策</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">合作伙伴</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-2 col-xs-6">
                <h6 class="text-sm text-u-c m-b text-muted">社区</h6>
                <div class="m-b-md">
                    <ul class="nav l-h-2x">
                        <li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">操作手策</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">卖家交流</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <h6 class="text-sm text-u-c m-b text-muted">服务</h6>
                <div class="m-b-md">
                    <ul class="nav l-h-2x">
                        <li class="nav-item"><a class="nav-link" href="#">联系我们</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">意见反馈</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="p-y-lg">
            <div class="m-b-lg text-sm">
                <div class="text-muted pull-right pull-none-xs m-b"><span class="text-muted">&copy; Copyright. All rights reserved.</span></div>
                <div><a href="#" class="btn btn-sm btn-icon btn-social rounded lt" title="Facebook"><i class="fa fa-wechat"></i> <i class="fa fa-wechat green"></i></a> <a href="#" class="btn btn-sm btn-icon btn-social rounded lt" title="Twitter"><i class="fa fa-qq"></i> <i class="fa fa-qq light-blue"></i></a> <a href="#" class="btn btn-sm btn-icon btn-social rounded lt" title="Google+"><i class="fa fa-pinterest"></i> <i class="fa fa-pinterest red-600"></i></a></div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="{% static '' %}aside/scripts/app.js"></script>
</body>
</html>